<template>
  <div style="height: 100%">
    <el-row :gutter="10" style="height: 100%">
      <el-col :span="14" style="height: 100%">
        <el-card style="height: 100%">
          <div slot="header">
            <span>待审核订单</span>
            <el-button
              style="float: right; text-decoration: underline"
              type="text"
              size="small"
              @click="jumpWait"
              >更多</el-button
            >
          </div>

          <hmi-table
            :loading="tloading"
            :table-data="awaitingData"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :table-height="'calc(100vh - 280px)'"
            index-tyle="index"
            @handle-size-change="handleSizeChange"
            @handle-current-change="handleCurrentChange"
          >
            <template slot="TableHead">
              <el-form ref="queryForm" :model="queryForm" inline>
                <el-row>
                  <el-form-item label="钢种" prop="steelGrade">
                    <el-select
                      v-model="queryForm.steelGradeId"
                      placeholder="请选择钢种"
                      style="width: 10vw"
                      filterable
                      allow-create
                      default-first-option
                      clearable
                    >
                      <el-option
                        v-for="item in steelGradeList"
                        :key="item.id"
                        :value="item.steelGradeName"
                        :label="item.steelGradeName"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="顾客名称" prop="customerName">
                    <el-select
                      v-model="queryForm.customerName"
                      filterable
                      placeholder="请输入顾客名称"
                      allow-create
                      default-first-option
                      clearable
                      style="width: 10vw"
                    >
                      <el-option
                        v-for="item in customerList"
                        :key="item.id"
                        :label="item.customerName"
                        :value="item.customerName"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="钢类" prop="steelTypeId">
                    <el-select
                      v-model="queryForm.steelTypeId"
                      placeholder="请选择钢类"
                      style="width: 10vw"
                      clearable
                    >
                    <el-option v-for="item in steelTypes" :key="item.id" :value="item.steelTypeName" :label="item.steelTypeName" />
                    </el-select>
                  </el-form-item>
                </el-row>
                <el-form-item label="编号" prop="code">
                  <el-input
                    v-model="queryForm.code"
                    placeholder="请输入编号"
                    style="width: 10vw"
                  ></el-input>
                </el-form-item>
                <el-form-item label="提交日期" prop="submitTime">
                  <el-date-picker
                    v-model="queryForm.submitTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                    style="width: 10vw"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="状态" prop="statusId">
                  <el-select
                    v-model="queryForm.statusId"
                    placeholder="请选择状态"
                    style="width: 10vw"
                  >
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="handleQuery"
                    >查询</el-button
                  >
                  <el-button type="success" size="mini" @click="resetForm"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </template>
            <template slot="TableBody">
              <el-table-column
                prop="index"
                label="序号"
                width="50"
                align="center"
                type="index"
              >
              </el-table-column>

              <el-table-column prop="code" label="编号" align="center">
              </el-table-column>

              <el-table-column
                prop="customerName"
                label="顾客名称"
                align="center"
              >
              </el-table-column>

              <el-table-column
                prop="customerPhone"
                label="顾客联系方式"
                align="center"
              >
              </el-table-column>

              <el-table-column prop="steelTypeName" label="钢类" align="center"></el-table-column>

              <el-table-column
                prop="steelGradeName"
                label="钢种"
                align="center"
                show-overflow-tooltip
              ></el-table-column>

              <el-table-column prop="specification" label="规格" align="center">
              </el-table-column>

              <el-table-column prop="steelNumber" label="数量" align="center">
              </el-table-column>

              <el-table-column
                prop="deliveryStatus"
                label="交货状态"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>

              <el-table-column
                prop="processingPurpose"
                label="加工用途"
                align="center"
              >
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleJump(scope.row)"
                    >处理</el-button
                  >
                </template>
              </el-table-column>
            </template>
          </hmi-table>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card style="height: 50vh">
          <div slot="header">
            <span>已审核订单</span>
            <el-button
              type="text"
              size="small"
              style="float: right; color: #409eff; text-decoration: underline"
              @click="jumpReviewed"
              >更多</el-button
            >
          </div>
          <hmi-table
            :table-data="verifiedData"
            :is-pagination-show="true"
            :table-height="'calc(50vh - 110px)'"
            :current-page="currentPage2"
            :page-size="pageSize2"
            :total="total2"
            index-tyle="index"
            @handle-size-change="handleSizeChangeReview"
            @handle-current-change="handleCurrentChangeReview"
          >
            <template slot="TableBody">
              <el-table-column
                label="序号"
                width="60"
                align="center"
                type="index"
              >
              </el-table-column>
              <el-table-column
                prop="customerName"
                label="顾客名称"
                width="120"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="steelTypeName" label="钢类" align="center"></el-table-column>
              <el-table-column
                prop="steelGradeName"
                label="钢种"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="outsourcing"
                label="外委"
                align="center"
                width="60"
              >
                <template slot-scope="scope">
                  {{ scope.row.outsourcing }}
                </template>
              </el-table-column>
              <el-table-column
                prop="submitTime"
                label="时间"
                width="130"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ formatterTime(scope.row.submitTime) }}
                </template>
              </el-table-column>
              <el-table-column label="详情" width="70" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleDetail(scope.row)"
                    >查看</el-button>
                </template>
              </el-table-column>
            </template>
          </hmi-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { timeChange } from "@/lib/FormatTime";
import HmiTable from "@/components/HmiTable.vue";
import {
  getPendingReviewList,
  getReviewedList,
  GET_STEELGRADELIST,
  GET_STEELTYPELIST,
  GET_CUSTOMERNAMELIST
} from "@/lib/Api.js";
import { post } from "@/lib/Util.js";
export default {
  components: { HmiTable },
  data() {
    return {
      queryForm: {
        steelGradeId: "",
        customerName: "",
        steelTypeId: "",
        code: "",
        submitTime: "",
        statusId: ""
      },
      tloading: false,
      pageSize: 20,
      total: 0,
      currentPage: 1,
      pageSize2: 20,
      total2: 0,
      currentPage2: 1,
      awaitingData: [],
      verifiedData: [],
      steelGradeList: [],
      steelTypes: [],
      customerList: []
    };
  },
  mounted() {
    this.getSteelGradeName();
    this.getsteelTypeNames();
    this.getCustomerNames();
    this.getReviewList(); // 已审核
    this.getData(this.currentPage, this.pageSize);
  },
  methods: {
    /**
     * 格式化日期方法
     */
    formatterTime(time) {
      if (time !== "" && time !== undefined) {
        return timeChange(time);
      } else {
        return "";
      }
    },
    //跳转至待审核
    jumpWait() {
      this.$router.push({
        path: "/center/toBeReviewed"
      });
    },
    //跳转至已审核
    jumpReviewed() {
      this.$router.push({
        path: "/center/toBeSent"
      });
    },
    handleDetail(row) {
      this.$router.push({
        name: "standard-approvedOrder-infoCompliance",
        params: {
          id: row.id
        }
      });
    },
    handleJump(row) {
      // 调用 Vuex action 来更新共享参数
      this.$store.dispatch("updateShareId", row.id);
      this.$router.push({
        path: "/center/calculationDetails"
      });
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      this.getData(1, val);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData(this.currentPage, this.pageSize);
    },
    //获取表格信息
    getData(page, num) {
      this.tloading = true;
      let data = Object.assign(this.queryForm, {
        current: page,
        page: num
      });
      post(getPendingReviewList, data).then(res => {
        if (res.code == 200) {
          this.awaitingData = res.rows;
          this.total = res.total;
        }
      });
      this.tloading = false;
    },
    getReviewList() {
      post(getReviewedList, {
        current: this.currentPage2,
        page: this.pageSize2
      }).then(res => {
        if (res.code == 200) {
          this.verifiedData = res.rows;
          this.total2 = res.total;
        }
      });
    },
    handleSizeChangeReview(pageSize) {
      this.pageSize2 = pageSize;
      this.currentPage2 = 1;
      this.getReviewList();
    },
    handleCurrentChangeReview(pageIndex) {
      this.currentPage2 = pageIndex;
      this.getReviewList();
    },
    handleQuery() {
      this.getData(this.currentPage, this.pageSize);
    },
    //重置表单
    resetForm() {
      this.$refs.queryForm.resetFields();
    },
    // 获取顾客
    getCustomerNames() {
      post(GET_CUSTOMERNAMELIST, { customerName: "" }).then(resp => {
        this.customerList = resp.data;
      });
    },
    // 获取钢类
    getsteelTypeNames() {
      post(GET_STEELTYPELIST, { steelTypeName: "" }).then(resp => {
        this.steelTypes = resp.data;
      });
    },
    getSteelGradeName() {
      post(GET_STEELGRADELIST, { steelGradeName: "" }).then(resp => {
        this.steelGradeList = resp.data;
      });
    }
  }
};
</script>

<style scoped>
.serch-filter {
  display: flex;
  justify-content: space-evenly;
}
</style>
